<template>
	<!-- 居中弹出 -->
	<gui-popup ref="guipopup1" width="654">
		<view class="gui-relative">
			<view class="title f32">
				请选择您要注册的身份
			</view>
			<view class="sf_box gui-flex gui-justify-content-center">
				<view class="sf_item mr100" @click="change(0)">
					<image src="../../static/image/geren.png" mode="widthFix"></image>
					<text class="gui-icons" v-if="userType == 0">&#xe7f8;</text>
					<view class="txt f24 mt10">
						求职人
					</view>
				</view>
				<view class="sf_item" @click="change(1)">
					<image src="../../static/image/qiye.png" mode="widthFix"></image>
					<text class="gui-icons" v-if="userType == 1">&#xe7f8;</text>
					<view class="txt f24 mt10">
						企业
					</view>
				</view>
			</view>
			<view class="btn_warp">
				<button class="saveBtn" @click="confirm">确认</button>
			</view>
			<!-- 关闭按钮 -->
			<text class="gui-block demo-close gui-icons gui-color-white gui-absolute-rt"
				@tap.stop="close1">&#xe78a;</text>
		</view>
	</gui-popup>
</template>

<script setup>
	import {
		ref,
		reactive,
		inject
	} from 'vue'
	const emit = defineEmits(['change', 'confirm'])
	
	/* const props = defineProps({
		mainHeight: {
			type: Number,
			default: ""
		}
	}) */
	
	const $u = reactive(inject('$u'))
	const guipopup1 = ref(null)
	const userType = ref(0);// 0用户 1企业
	
	const open = () => {
		guipopup1.value.open();
	}
	
	const close = () => {
		guipopup1.value.close();
	}
	
	const change = (type) => {
		userType.value = type;
	}
	
	const confirm = () => {
		let data = Object.assign(userType, {})
		emit('confirm', data)
	}
	
	
	// 抛出函数
	defineExpose({
		open,
		close
	})
</script>

<style lang="scss">
	.gui-relative{
		width: 654rpx;
		height: 532rpx;
		background: #FFFFFF;
		border-radius: 38rpx;
		padding: 63rpx 0;
		box-sizing: border-box;
	}
	
	.title {
		text-align: center;
	}
	
	.sf_box {
		margin-top: 49rpx;
	}
	
	.mr100 {
		margin-right: 100rpx;
	}
	
	.sf_item {
		position: relative;
		
		.gui-icons {
			position: absolute;
			right: 10rpx;
			bottom: 50rpx;
			color: #FFFFFF;
			font-size: 24rpx;
		}
	}
	
	.sf_item image {
		width: 170rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.txt {
		text-align: center;
	}
	
	.saveBtn {
		margin-top: 40rpx;
		width: 456rpx;
		height: 64rpx;
	}

</style>